<template>
  <div class="page">
    <div class="hei20"></div>
    <mt-field label=""
              readonly
              class="searchTop"
              placeholder="网格"
              v-model="searchWords"
              v-lfcous='handleCommonSelect'></mt-field>
    <div class="container">
      <div class="tableList">
        <vTable :tableColumns='columns'
                :tableData='tableData'
                v-on:handleRowclick='handleCheckSingle'></vTable>
      </div>
      <div class="hei20"></div>
      <mt-button class="moreBtn"
                 type="primary"
                 size='small'
                 icon="more"
                 @click="hanldleLoadMore">加载更多</mt-button>
      <div class="pubWrapper"
           @click="handleCollection">
        <img class="pub-icon"
             src="@/assets/images/pub-icon.png"
             alt="" />
        <p>去采集</p>
      </div>
      <fadeRight v-show='dialogShow'>
        <div class="dialog"
             key="ke">
          <div class="dialog-title">部件采集</div>
          <span class="close-btn"
                @click="close">
            <img width="20px"
                 height="20px"
                 src="@/assets/images/close-icon.png" />
          </span>
          <div class="dialog-content">
            <mt-field label="部件名称"
                      placeholder="部件名称"
                      class="require"
                      v-model="formData.componentName"></mt-field>
            <mt-field label="部件编码"
                      placeholder="部件编码"
                      class="require"
                      v-model="formData.componentCode"></mt-field>
            <mt-field label="部件类型"
                      placeholder="部件类型"
                       class="require"
                      v-model="formData.componentTypeName"
                      real='componentType'
                      readonly
                      v-lfcous='handleSelectComponentType'></mt-field>
            <a data-v-9667e92e=""
               class="mint-cell mint-field">
              <div class="mint-cell-left"></div>
              <div class="mint-cell-wrapper">
                <div class="mint-cell-title">
                  <span class="mint-cell-text">部件图片</span>
                </div>
                <div class="mint-cell-value">
                  <wap-image v-model="formData.picture"></wap-image>
                </div>
              </div>
              <div class="mint-cell-right"></div>
            </a>
            <mt-field label="街道"
                      placeholder="街道"
                      v-model="formData.street"
                       class="require"
                       readonly
                      v-lfcous='handleSelectStreet'></mt-field>
            <mt-field label="社区"
                      placeholder="社区"
                       class="require"
                       readonly
                      v-model="formData.rquarters"
                      v-lfcous='handleSelectRquarters'></mt-field>
            <mt-field label="网格"
                      placeholder="网格"
                       class="require"
                       readonly
                      v-model="formData.grid"
                      v-lfcous='handleSelectGrid'></mt-field>
            <!-- <mt-field label="职能部门"
                      placeholder="职能部门"
                      v-model="formData.communityName"
                      v-lfcous='handleSelectDepartment'></mt-field> -->
            <mt-field label="纬度"
                      placeholder="纬度"
                       class="require"
                      v-model="formData.latitude"></mt-field>
            <mt-field label="经度"
                      placeholder="经度"
                       class="require"
                      v-model="formData.longitude"></mt-field>
            <mt-field label="简介"
                      placeholder="简介"
                      type="textarea"
                      rows="3"
                      v-model="formData.remark"></mt-field>
            <div class="hei20"></div>
            <div class="m-btn clearfix">
              <mt-button type="primary"
                         class="pull-left"
                         @click="save">提交</mt-button>
              <mt-button type="primary"
                         class="pull-right"
                         @click="handleCoordinateClick">选择坐标</mt-button>
            </div>
            <div class="hei40"></div>
          </div>
        </div>
      </fadeRight>
    </div>
    <v-select :show='selectStreetShow'
              v-on:callbackData='callbackDataStreet'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataStreet'></v-select>
    <v-select :show='selectRquartersShow'
              v-on:callbackData='callbackDataRquarters'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataRquarters'></v-select>
    <v-select :show='selectGridShow'
              v-on:callbackData='callbackDataGrid'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataGrid'></v-select>
    <v-select :show='selectShow'
              v-on:callbackData='callbackData'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultData'
              :pickData='selectData'></v-select>
    <v-select :show='selectCommunityShow'
              v-on:callbackData='callbackCommunityData'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultData'
              :pickData='communityData'
              :parameter='parameter'
              :replaceData='replaceUnitData'
              :attr='attr'></v-select>
  </div>
</template>
<script>
import Vue from 'vue'
import { Button, Field, MessageBox } from 'mint-ui'
import vTable from '@/components/vTable'
import vSelect from '@/components/vSelect'
import fadeRight from '@/components/fadeRight'
import { findComponent, updateComponent, createComponent,
findGridTree, getDeptTree} from '@/assets/js/ApiUtil'
import { getLabelById } from '@/assets/js/Utils'
import { uploadUntil } from '@/assets/js/ImageUtil'
import tableDo from '@/components/tableDo'
import WapImage from '@/components/WapImage'
Vue.component(WapImage.name, WapImage)
Vue.component(Button.name, Button)
Vue.component(Field.name, Field)
Vue.component(MessageBox.name, MessageBox)
Vue.component('table-do', tableDo)

let page = 0
export default {
  name: 'House',
  data () {
    return {
      title: '部件采集',
      parameter: '',
      queryData: {},
      parentId: '',
      attr: '',
      dialogShow: false,
      selectShow: false,
      searchWords: '',
      selectStreetShow: false,
      selectRquartersShow: false,
      selectGridShow: false,
      selectCommunityShow: false,
      formData: {},
      tableData: [],
      replaceUnitData: {
        id: 'code',
        name: 'unitName'
      },
      columns: [
        { field: 'componentName', title: '名称', width: 64, titleAlign: 'center', columnAlign: 'center', isResize: true, titleCellClassName: 'tcellName' },
        { field: 'componentCode', title: '编号', width: 64, titleAlign: 'center', columnAlign: 'center', isResize: true, titleCellClassName: 'tcellName' },
        { field: 'funDo', title: '操作', width: 64, titleAlign: 'center', columnAlign: 'center', isResize: true, componentName: 'table-do', titleCellClassName: 'tcellName' }
      ],
      defaultDataStreet: [
        { d: 0, name: '加载中....' }
      ],
      defaultData: [
        { d: 0, name: '加载中....' }
      ],
      selectDataStreet: { data1: [{ id: 0, name: '加载中...' }] },
      selectDataRquarters: { data1: [{ id: 0, name: '加载中...' }] },
      selectDataGrid: { data1: [{ id: 0, name: '加载中...' }] },
      selectData: { data1: [{ id: 0, name: '加载中...' }] },
      communityData: { data1: [{ id: 0, name: '加载中...' }] }
    }
  },
  components: {
    vTable,
    vSelect,
    Button,
    Field,
    fadeRight,
    tableDo
  },
  mounted () {
    this.getTableData()
    this.getOptions()
  },
  methods: {
    save () {
      console.log(this.formData)
      if (this.formData) {
        if (!this.validate(this.formData)) {
          return false
        }
        if (this.formData.id) {
          updateComponent(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              MessageBox({title: '提示',
                message: '修改成功',
                showCancelButton: false}).then(action => {
                this.getTableData()
                this.close()
              })
            }
          })
        } else {
          createComponent(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              MessageBox({title: '提示',
                message: '添加成功',
                showCancelButton: false}).then(action => {
                this.getTableData()
                this.close()
              })
            }
          })
        }
      }
    },
    handleCoordinateClick () {
      app.getLocation()
    },
    locationBack (data) {
      console.log('内部打印：'+data)
      let obj = JSON.parse(data)
      let latitude = obj.latitude
      let longitude = obj.longitude
      let address = obj.address
      this.$set(this.formData,'latitude', latitude)
      this.$set(this.formData,'longitude', longitude)
      this.$set(this.formData,'address', address)
    },
    validate (formData) {
      if (!formData.street) {
        MessageBox('提示', '请填写街道')
        return false
      } else if (!formData.rquarters) {
        MessageBox('提示', '请填写社区')
        return false
      } else if (!formData.grid) {
        MessageBox('提示', '请填写网格')
        return false
      } else if (!formData.componentName) {
        MessageBox('提示', '请输入部件名称：')
        return false
      } else if (!formData.componentCode) {
        MessageBox('提示', '请输入部件编码')
        return false
      } else if (!formData.componentType) {
        MessageBox('提示', '请选择部件类型')
        return false
      } else if (!formData.longitude) {
        MessageBox('提示', '请选择经纬度')
        return false
      } else if (!formData.longitude) {
        MessageBox('提示', '请选择经纬度')
        return false
      } else {
        return true
      }
    },
    getTableData () {
      let param = this.queryData
      findComponent(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
            if (this.pageData.items && this.pageData.items instanceof Array) {
              if (param.hasOwnProperty('offset')) {
                this.tableData = this.tableData.concat(this.pageData.items)
              } else {
                this.tableData = this.pageData.items
              }
            }
          }
        }
      })
    },
    getOptions () {
      findGridTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            let newData = JSON.parse(JSON.stringify(data[0].children))
            newData.unshift({ 'name': '全部', 'id': -1 })
            this.parentId = data[0].id
            this.selectDataStreet = { data1: data[0].children }
            this.selectData = { data1: newData }
            return false
          }
        }
      })
    },
    handleCollection () {
      this.dialogShow = true
    },
    close () {
      this.dialogShow = false
      this.formData = {}
    },
    handleCheckSingle (data) {
      this.dialogShow = true
      this.formData = data.items
      let arr = this.formData.allGridId.split(',')
      this.formData.street = getLabelById(arr[2], this.selectDataStreet)
      this.formData.rquarters = getLabelById(arr[3], this.selectDataStreet)
      this.formData.grid = getLabelById(arr[4], this.selectDataStreet)
      let treeArr = this.selectDataStreet.data1
      for (let i = 0; i < treeArr.length; i++) {
        if (treeArr[i].id === arr[2]) {
          this.selectDataRquarters = { data1: treeArr[i].children }
          for (let j = 0; j < treeArr[i].children.length; j++) {
            if (treeArr[i].children[j].id === arr[3]) {
              this.selectDataGrid = { data1: treeArr[i].children[j].children }
            }
          }
        }
      }
      let componentList = [{ name: '路灯', code: '01' },
        { name: '健身器材', code: '02' },
        { name: '宣传栏', code: '03' },
        { name: '实景', code: '04' },
        { name: '水域', code: '05' },
        { name: '其他', code: '06' }]
      for (let i = 0; i < componentList.length; i++) {
        let code = this.formData.componentType
        if (componentList[i].code === code) {
          this.formData.componentTypeName = componentList[i].name
        }
      }
    },
    handleSelectStreet () { // 街道下拉显示
      this.selectStreetShow = true
    },
    handleSelectRquarters () { // 社区下拉显示
      this.selectRquartersShow = true
    },
    handleSelectGrid () { // 网格下拉显示
      this.selectGridShow = true
    },
    callbackDataStreet (data) { // 社区街道回调
      this.selectStreetShow = false
      this.selectDataRquarters = { data1: data.items.select1.children }
      this.formData.allGridId = ''
      this.formData.street = data.defaultData[0].name
      this.formData.streetId = data.defaultData[0].id
      this.formData.allGridId = '0' + ',' + this.parentId + ',' + this.formData.streetId
      if (data.defaultData[0].name === '加载中...') this.formData.street = ''
    },
    callbackDataRquarters (data) { // 社区回调
      this.selectRquartersShow = false
      this.selectDataGrid = { data1: data.items.select1.children }
      this.formData.rquartersId = data.defaultData[0].id
      this.formData.rquarters = data.defaultData[0].name
      this.formData.allGridId = '0' + ',' + this.parentId + ',' + this.formData.streetId + ',' + this.formData.rquartersId
      if (data.defaultData[0].name === '加载中...') this.formData.rquarters = ''
    },
    callbackDataGrid (data) { // 网格回调
      this.selectGridShow = false
      this.formData.gridId = data.defaultData[0].id
      this.formData.allGridId = '0' + ',' + this.parentId + ',' + this.formData.streetId + ',' + this.formData.rquartersId + ',' + this.formData.gridId
      this.formData.grid = data.defaultData[0].name
      if (data.defaultData[0].name === '加载中...') this.formData.grid = ''
    },
    closeBackData () { // 关闭事件
      this.selectStreetShow = false
      this.selectRquartersShow = false
      this.selectGridShow = false
      this.selectCommunityShow = false
      this.selectShow = false
    },
    handleCommonSelect () { // 通用显示事件
      this.selectShow = true
    },
    callbackData (data) {
      this.selectShow = false
      this.defaultData = data.defaultData
      this.searchWords = data.defaultData[0].name
      this.queryData = {}
      if (data.defaultData[0].id !== -1) this.queryData.likeAllGridId = data.defaultData[0].id
      if (data.defaultData[0].name === '加载中...') this.searchkey = ''
      this.getTableData()
    },
    callbackCommunityData (data) {
      this.selectCommunityShow = false
      this.formData[data.parameter] = data.defaultData[0].name
      if (data.attr) {
        if (data.defaultData[0].hasOwnProperty('code')) {
          this.formData[data.attr] = data.defaultData[0].code
        } else {
          this.formData[data.attr] = data.defaultData[0].id
          console.log(this.formData[data.attr])
        }
      }
    },
    handleSelectCommunity (key) {
      this.selectCommunityShow = true
      this.parameter = key
      this.getCommunityData(this.formData.gridId)
    },
    handleSelectComponentType (key, attr) {
      this.selectCommunityShow = true
      this.parameter = key
      this.attr = attr
      this.communityData = { data1: [{ name: '路灯', code: '01' },
        { name: '健身器材', code: '02' },
        { name: '宣传栏', code: '03' },
        { name: '实景', code: '04' },
        { name: '水域', code: '05' },
        { name: '其他', code: '06' }] }
    },
    handleSelectDepartment () {
      this.selectCommunityShow = true
      getDeptTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            window.sessionStorage.setItem('user_dept_tree', JSON.stringify(data))
            window.localStorage.setItem('user_dept_tree', JSON.stringify(data))
            if (data && data instanceof Array) {
              this.communityData = { data1: data }
            }
          }
        }
      })
    },
    handleClickImg () {

    },
    hanldleLoadMore () {
      page = page + 10
      this.queryData.offset = page
      this.getTableData()
    },
    handleUpImg () {
      let filHead = this.$refs['file_head']
      let _this = this
      uploadUntil(filHead, function (data) {
        _this.$set(_this.formData, 'picture', data[0])
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  overflow: auto
}
.container {
  position: relative;
  z-index: 10;
  padding: 10px 10px;
}
.tableList >>> .tcellName {
  color: #fff;
}
.tableList >>> .tcellName .vertical-border {
  color: #fff;
}

.tableList >>> .vertical-border {
  border-right: none !important;
  font-size: 14px;
  color: #858585;
}
.tableList >>> .v-table-rightview {
  right: -1px; /*覆盖原有样式，解决表头最右侧有1px的间隙 */
}
.unitTable >>> .v-table-rightview {
  right: -1px; /*覆盖原有样式，解决表头最右侧有1px的间隙 */
  width: 100% !important;
}
.unitTable >>> .tcellName .vertical-border {
  color: #fff;
  font-size: 14px;
}
.v-table-class {
  z-index: 10;
}
.tableList >>> .v-table-views {
  border-left: none;
  border-right: none;
}
.unitTable >>> .v-table-views {
  font-size: 12px;
}
.moreBtn {
  width: 100%;
}
.pubWrapper {
  position: fixed;
  right: 10px;
  top: 30%;
  z-index: 11;
  text-align: center;
}
.pub-icon {
  width: 30px;
  height: 30px;
}
.pubWrapper p {
  font-size: 12px;
  color: #26a2ff;
  padding: 0;
  margin: 0;
}
.searchTop {
  background: none;
}
.searchTop >>> input {
  background: none;
}
.dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  z-index: 15;
  overflow: auto;
}
.close-btn {
  position: absolute;
  right: 10px;
  top: 13px;
}
.subBtn {
  display: block;
  width: calc(100% - 20px);
  margin: 0px auto;
}
.dialog {
  background: #fff;
}
.dialog-title {
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #d9d9d9;
}
.mint-field >>> .mint-field-core {
  font-family: "微软雅黑";
}
.dialog-content {
  padding: 0 10px;
}
.mint-field >>> .mint-cell-wrapper {
  border-bottom: 1px solid #d9d9d9;
  background-image: none;
}
.m-btn {
  text-align: center;
  font-size: 0;
}
.m-btn .mint-button {
  width: 48%;
}
.unitTitle {
  border-bottom: 1px solid #d9d9d9;
  margin: 10px 0;
  padding: 10px 0;
}
.upsrc {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: Center;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
}
.upsrc img {
  width: 100%;
  height: 100%;
}
#file_head {
  position: absolute;
  width: 140px;
  height: 140px;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>
